<template>
  <div id="app">
    <transition name="slide">
      <router-view class="root-view" keep-alive></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  #app{
    height: 100%;
  }
  .root-view{
    padding-top:40px;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    width:100%;
    transition: all .5s ease;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .slide-enter, .slide-right-leave-active {
    transform: translate(100%, 0);
  }
  .slide-leave-active, .slide-right-enter {
    transform: translate(-100%, 0);
  }
</style>
